---
layout: default
title: Podcasts
description: |
  Level up your web development skills by listening to podcasts from Google
  Developers. Our podcasts highlight the latest in modern web development with
  pro-tips, insights, and techniques to help you learn what's new and how to
  build with best practices in mind.
date: 2020-04-06
---

<div class="wide-card-index">

  {# Hero starts #}
  <header class="region bg-mid-bg">
    <div class="wrapper">
      <div class="headline all-center flow">
        <h1 class="headline__title">{{ title }}</h1>
        <p>{{ description }}</p>
      </div>
    </div>
  </header>
  {# Hero ends #}

  {# Cards #}
  <div class="region wrapper" data-size="narrow">
    <nav class="auto-grid" aria-label="podcasts">
      {% for podcast in podcasts %}
        <a
          href="{{ podcast.url }}"
          class="card"
          data-category="web.dev"
          data-label="Podcasts: {{podcast.title}}"
          data-action="click"
          role="listitem"
        >
          <img src="{{ podcast.thumbnail }}" alt="" loading="lazy" width="100%" height="240" />
          <div class="card__content flow">
            <h2 class="card__heading text-size-2">{{ podcast.title }}</h2>
            <p class="text-size-0">{{ podcast.description }}</p>
          </div>
        </a>
      {% endfor %}
    </nav>
  </div>
  {# Cards end #}

</div>
